<template>
  <a-modal
    title="$t('bannerCreateForm.tj')"
    :width="500"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item
          label="$t('bannerCreateForm.lx')"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-radio-group v-decorator="['belong', {rules: [{required: true, message: '{{ $t('bannerCreateForm.bnwk') }}'}]}]" @change="handleChangeType" buttonStyle="solid">
            <a-radio-button value="buyer">{{ $t('bannerCreateForm.mj') }}</a-radio-button>
            <a-radio-button value="shop">{{ $t('bannerCreateForm.sj') }}</a-radio-button>
            <a-radio-button value="">{{ $t('bannerCreateForm.qb') }}</a-radio-button>
          </a-radio-group>
        </a-form-item>
        <a-form-item
          label="$t('bannerCreateForm.ym')"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-select style="width: 150px" v-decorator="['page', {rules: [{required: true, message: '{{ $t('bannerCreateForm.bnwk') }}'}]}]">
            <a-select-option value="index">{{ $t('bannerCreateForm.sy') }}</a-select-option>
            <a-select-option value="vip">vip</a-select-option>
            <a-select-option value="task">{{ $t('bannerCreateForm.rw') }}</a-select-option>
            <a-select-option value="order">{{ $t('bannerCreateForm.dd') }}</a-select-option>
            <a-select-option value="me">{{ $t('bannerCreateForm.wd') }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          label="$t('bannerCreateForm.tp')"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-upload
            name="file"
            accept="jpg,jpeg,png,bmp"
            :multiple="false"
            :action="uploadUrl"
            :headers="uploadHeaders"
            @change="handleUploadChange"
          >
            <a-button> <a-icon type="upload" /> Click to Upload </a-button>
          </a-upload>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>

import { ACCESS_TOKEN } from '@/store/mutation-types'

export default {
  data () {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 17 }
      },
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
      loadingParse: false,
      other_action: '',
      formData: {
        page: '',
        belong: '',
        img: ''
      },
      uploadHeaders: {
        authorization: 'authorization-text'
      },
      uploadUrl: '',
      uploadImg: '',
    }
  },
  methods: {
    add () {
      this.visible = true
    },
    handleUploadChange (info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList)
      }
      if (info.file.status === 'done') {
        let resp = info.file.response
        if (resp.code === 0) {
          this.uploadImg = resp.data
        }
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} file upload failed.`)
      }
    },
    handleSubmit () {
      console.log(this.formData)
      const { form: { validateFields } } = this
      this.confirmLoading = true
      validateFields((errors, values) => {
        if (!errors) {
          console.log(values)
          this.formData.page = values.page
          this.formData.belong = values.belong
          this.formData.img = this.uploadImg
          console.log('values', this.formData)
          setTimeout(() => {
            this.visible = false
            this.confirmLoading = false
            this.$emit('ok', this.formData)
          }, 1500)
        } else {
          this.confirmLoading = false
        }
      })
    },
    handleChangeType (e) {
      this.formData.type = e.target.value
    },
    handleCancel () {
      this.visible = false
    },
    loadToken () {
      const token = this.$ls.get(ACCESS_TOKEN)
      if (token) {
        this.uploadHeaders.authorization = 'Bearer ' + token // 让每个请求携带自定义 token 请根据实际情况自行修改
      }
    }
  },
  created () {
    this.uploadUrl = process.env.VUE_APP_API_BASE_URL + 'banner/upload'
    this.loadToken()
  }
}
</script>
